:root {
    --color-jet:0 0% 4%;
    --color-charcoal:0 0% 10%;
    --color-umbra:221 12% 14%;
    --color-ink:213 11% 16%;
    --color-ash:216 5% 19;
    --color-steel:216 4% 22%;
    --color-fog:216 4% 51%;
    --color-pewter:213 12% 70%;
    --color-dove:222 19% 86%;
    --color-nimbus:228 21.74% 95.49%;
    --color-ivory:40 18% 97%;
    --color-white:0 0% 100%;
    --color-midnight:214 58.3% 9.4%;
    --color-evenfall:214 16.1% 28%;
    --color-breeze:214 48.9% 73.9%;
    --color-dawn:37 100% 76%;
    --color-sunset:22 100% 51.6%;
    --color-dusk:263 70% 50.4%;
    --color-twilight:255 92% 76%;
    --primary:var(--color-jet);
    --primary-hover:var(--color-umbra);
    --secondary:var(--color-fog);
    --secondary-hover:var(--color-pewter);
    --accent:var(--color-sunset);
    --accent-hover:var(--color-dawn);
    --background:var(--color-white);
    --background-hover:var(--color-dove);
    --foreground:var(--color-jet);
    --foreground-hover:var(--color-umbra);
    --card:var(--color-ivory);
    --border:var(--color-dove);
    --input:var(--color-white);
    --scroll-size:6px;
    --scroll-track-color:var(--color-white);
    --scroll-thumb-color:var(--color-dove);
    --radius:0.5rem
  }
  .dark {
    --primary:var(--color-white);
    --primary-hover:var(--color-ivory);
    --secondary:var(--color-fog);
    --secondary-hover:var(--color-pewter);
    --accent:var(--color-sunset);
    --accent-hover:var(--color-dawn);
    --background:var(--color-jet);
    --background-hover:var(--color-umbra);
    --foreground:var(--color-dove);
    --foreground-hover:var(--color-white);
    --card:var(--color-charcoal);
    --border:var(--color-umbra);
    --input:var(--color-fog);
    --scroll-track-color:var(--color-charcoal);
    --scroll-thumb-color:var(--color-jet)
  }